<template>
  <!-- 辖区管理 -->
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="l-w_content">
          <top-title :updateTime="true" :content="content"></top-title>
          <div class="search-group">
            <div class="input-wrap">
              <div class="label">设备MN码:</div>
              <div class="input-item">
                <a-input :maxLength="30" v-model="queryParam.monitorMn" placeholder="请填写设备MN码" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">设备组名称:</div>
              <div class="input-item">
                <a-input :maxLength="30" v-model="queryParam.name" placeholder="请填写设备组名称" />
              </div>
            </div>
            <div class="input-wrap">
              <div class="label">餐厅名称:</div>
              <div class="input-item">
                <!-- :filter-option="filterOption" -->
                <a-select
                  show-search
                  ref="select"
                  style="width: 100%"
                  placeholder="请填写餐厅名称"
                  :filter-option="false"
                  @search="getAllRestaurant"
                  v-model="queryParam.restaurantId"
                >
                  <a-select-option
                    v-for="(item, index) in restaurantList"
                    :key="index"
                    :value="item.id"
                    :label="item.businessName"
                  >
                    {{ item.businessName }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
            <div class="input-wrap">
              <div class="label">监测仪状态:</div>
              <div class="input-item">
                <a-select ref="select" allowClear v-model="queryParam.monitorStatus" placeholder="请选择监测仪状态">
                  <a-select-option value="0">离线</a-select-option>
                  <a-select-option value="1">在线</a-select-option>
                </a-select>
              </div>
            </div>
            <div class="input-wrap">
              <div class="label">设备状态:</div>
              <div class="input-item">
                <a-select ref="select" style="width: 100%" placeholder="请填写餐厅名称" v-model="queryParam.status">
                  <a-select-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :value="item.value"
                    :label="item.title"
                  >
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </div>
            </div>

            <div class="btn-wrap">
              <a-button class="searchBtn" @click="searchQuery()" type="primary">搜索</a-button>
              <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
            </div>
          </div>

          <div class="table-wrap">
            <a-table
              rowKey="id"
              class="tableList"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              @change="handleTableChange"
            >
              <template slot="monitorStatus" slot-scope="records">
                <span :class="records.monitorStatus == 1 ? 'table-online' : 'table-offline'">
                  {{ records.monitorStatus_dictText }}
                </span>
              </template>

              <template slot="thickSmoke" slot-scope="records">
                <span
                  :class="
                    records.thickSmokeType == 1
                      ? 'table-normal'
                      : records.thickSmokeType == 2
                      ? 'table-earlyWarning'
                      : 'table-warming'
                  "
                >
                  {{ records.thickSmoke }}
                  <!-- {{ records.thickSmokeType_dictText }} -->
                </span>
              </template>

              <template slot="particleHaze" slot-scope="records">
                <span
                  :class="
                    records.particleHazeType == 1
                      ? 'table-normal'
                      : records.particleHazeType == 2
                      ? 'table-earlyWarning'
                      : 'table-warming'
                  "
                >
                  {{ records.particleHaze }}
                  <!-- {{ records.particleHazeType_dictText }} -->
                </span>
              </template>

              <template slot="nonMethane" slot-scope="records">
                <span
                  :class="
                    records.nonMethaneType == 1
                      ? 'table-normal'
                      : records.nonMethaneType == 2
                      ? 'table-earlyWarning'
                      : 'table-warming'
                  "
                >
                  {{ records.nonMethane }}
                  <!-- {{ records.nonMethaneType_dictText }} -->
                </span>
              </template>

              <template slot="fanStatus" slot-scope="records">
                <img v-if="records.fanStatus == 1" src="@/assets/imgs/device/paifengji_on.png" alt="" />
                <img v-else src="@/assets/imgs/device/paifengji_off.png" alt="" />
                <span :class="records.fanStatus == 1 ? 'table-online' : 'table-offline'">
                  {{ records.fanStatus == 1 ? '开启' : '关闭' }}
                </span>
              </template>

              <template slot="purifyStatus" slot-scope="records">
                <img v-if="records.purifyStatus == 1" src="@/assets/imgs/device/jingfengji_on.png" alt="" />
                <img v-else src="@/assets/imgs/device/jingfengji_off.png" alt="" />
                <span :class="records.purifyStatus == 1 ? 'table-online' : 'table-offline'">
                  {{ records.purifyStatus == 1 ? '开启' : '关闭' }}
                </span>
              </template>

              <template v-slot:action="records">
                <span class="operation deatil-color" @click="detailsHandle(records)">详情</span>
                <span class="operation deatil-color" @click="showNromalValueEdit(records.id)">标称值</span>
                <span class="operation warnColor" @click="showDelete(records)">移除</span>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>

    <nominal-value ref="nominalValue" @refresh="searchQuery()"></nominal-value>
    <detail-modal ref="detailModal"></detail-modal>
    <allMessage
      :publicVisible="publicVisible"
      ref="allMessage"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import allMessage from '@/components/allMessage'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import detailModal from './modules/detailModal'
import { deviceDel } from '@/api/device'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import nominalValue from './modules/nominalValue'
import { mapState } from 'vuex'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'

export default {
  name: 'area-index',
  components: { allMessage, leftTree, topTitle, nominalValue, detailModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/device/page',
        tree: true,
      },
      // disableMixinCreated: false,
      content: [['设备管理']],
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '设备MN码',
          dataIndex: 'monitorMn',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '设备组名称',
          dataIndex: 'name',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '所属餐厅',
          dataIndex: 'restaurantId_dictText',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '监测仪',
          // dataIndex: 'status_dictText',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'monitorStatus' },
        },
        {
          title: '油烟(mg/m³)',
          // dataIndex: 'thickSmoke',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'thickSmoke' },
        },
        {
          title: '颗粒物(mg/m³)',
          // dataIndex: 'particleHaze',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'particleHaze' },
        },
        {
          title: '非甲烷总烃(mg/m³)',
          // dataIndex: 'nonMethane',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'nonMethane' },
        },
        {
          title: '排风机',
          // dataIndex: 'fanStatus',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'fanStatus' },
        },
        {
          title: '净化器',
          // dataIndex: 'purifyStatus',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'purifyStatus' },
        },
        {
          title: '监管单位',
          dataIndex: 'unitId_dictText',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'action' },
        },
      ],
      restaurantList: [],
      statusList: [],
    }
  },
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      this.searchQuery()
      this.getAllRestaurant()
      this.detailFlag = false
    },
  },

  mounted() {
    if (this.$route.query) {
      // this.disableMixinCreated = true
      this.queryParam = { ...this.$route.query }
      setTimeout(() => this.searchQuery(), 1000)
    }

    this.statusDict()
  },
  methods: {
    async statusDict() {
      let { result } = await ajaxGetDictItems({ code: 'client_status' })
      this.statusList = result
    },

    detailsHandle(records) {
      this.$refs.detailModal.show(records)
      // this.$router.push({ path: '/device/modules/detailModal', query: records })
    },

    async getAllRestaurant(a) {
      let { unitId } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      let params = { unitId, pageSize: 999999 }
      if (a) params.restaurantName = a
      let {
        result: { records },
      } = await getAction('/restaurant/audit_page?auditStatus=2', params)
      this.restaurantList = records
    },

    filterOption(input, option) {
      return this.restaurantList.filter((item) => {
        return item.businessName.includes(input) == true
      })
    },

    showNromalValueEdit(id) {
      this.$refs.nominalValue.show(id)
    },

    refresh() {
      this.searchQuery()
    },

    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },

    tipMessage(records) {
      deviceDel({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
}

.table-online {
  color: #0eff47;
}

.table-offline {
  color: #098d8d;
}

.table-normal {
  color: #5dd5d8;
}
.table-earlyWarning {
  color: #deef35;
}
.table-warming {
  color: #ff517b;
}
</style>
